<template>
    <div class="loginview">
        <div class="username">
            <div class="word"> 账号:</div><input type="text" v-model="username">
        </div>
        <div class="password">
            <div class="word">密码:</div> <input type="password" v-model="password">
        </div>
        <button class="loginbtn" @click="login"></button>
    </div>
</template>
<script setup>
import api from '@/api/user'
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
import { useAuthStore } from '@/store/index.ts'
const store = useAuthStore();
const router = useRouter();
const username = ref("");
const password = ref("");
//点击登录
const login = () => {
    api.login({
        username: username.value,
        password: password.value
    })
        .then((res) => {
            store.setroomid(null);
            store.setid(null);
            if (res.code == 200) {
                localStorage.setItem("token", res.token);
                router.push("/")
            } else {
                message.info(res.msg)
            }
        })
}
</script>
<style lang="scss" scoped>
* {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}

.loginview {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url('@/static/back.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    gap: 2rem;

    .username {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2rem;
        gap: 2rem;

        .word {
            width: 20%;
            border: #fb5e2f solid 0.2rem;
            border-radius: 2rem;
            color: #fc6845;
            background-color: #fee2b3;
            padding: 0 0.3rem 0 0.3rem;
        }

        input {
            width: 40%;
            height: 5rem;
            border-radius: 2rem;
            padding-left: 1rem;
     
            font-size: 4rem;
        }
    }

    .password {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2rem;
        gap: 2rem;

        .word {
            width: 20%;
            border: #fb5e2f solid 0.2rem;
            border-radius: 2rem;
            color: #fc6845;
            background-color: #fee2b3;
            padding: 0 0.3rem 0 0.3rem;
        }

        input {
            border-radius: 2rem;
            padding-left: 1rem;
            width: 40%;
            height: 5rem;
            font-size: 4rem;
        }
    }

    .loginbtn {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-image: url("@/static/loginbtn.png");
        background-color: transparent;
        /* 将背景颜色设置为透明 */
        height: 4rem;
        width: 10rem;
    }
}
</style>